<template>
    <div class="contianer">
        <div v-if="tableData != ''">
            <div class="oneArtcle" v-for="articleData in tableData">
                <img class="articleImg" v-if="articleData.fileUid" :src="articleData.fileUid" alt="加载失败"
                    @click="oneArticle(articleData)">
                <div class="articleMess" @click="oneArticle(articleData)">
                    <p class="titleList" v-html="articleData.title" @click="oneArticle(articleData)"></p>

                    <p class="summary" v-html="articleData.summary" @click="oneArticle(articleData)"></p>
                    <div class="articleMessData" @click="oneArticle(articleData)">
                        <div class="clickCount">
                            <p>发布时间</p>
                            <p v-html="articleData.createdTime"></p>
                        </div>
                        <div class="clickCount">
                            <p v-html="articleData.clickCount"></p>
                            <p>阅读</p>
                        </div>
                        <div class="clickCount">
                            <p v-html="articleData.likeCount"></p>
                            <p>点赞</p>
                        </div>
                        <div class="clickCount">
                            <p v-html="articleData.collectCount"></p>
                            <p>收藏</p>
                        </div>
                    </div>
                </div>

                <div v-if="myUserType != 0">
                    <el-button type="danger" plain icon="el-icon-delete" circle class="deleteBlogBtn"
                        @click="deleteBlogBtn(articleData.id)"></el-button>
                </div>
            </div>
        </div>


        <div v-else>
            <el-empty description="没有文章信息,请重新搜索"></el-empty>
        </div>

        <div class="adminBtn" v-if="myUserType != 0">
            <el-button @click="addArticle()" type="warning" style="margin-left: 5%;">添加文章</el-button>
        </div>

    </div>
</template>

<script>
import { findMyAccountType } from '@/assets/api/user.js'
import { findAllArticle } from '@/assets/api/user.js'
import { searchAllArticle } from '@/assets/api/user.js'
import { $deleteArticle } from '@/assets/api/user.js'
export default {
    name: "articleAdmin",
    data() {
        return {
            tableData: [

            ],
            myUserType: ''
        };
    },
    watch: {
    },
    created() {
        this.init();
        this.findAllArticle();
    },
    methods: {
        init() {//初始化，获取自己的身份权限
            findMyAccountType().then((res) => {
                this.myUserType = res.data.data.findMyAccountType;
                if (!res.data.success) {
                    this.message(res);
                }
            }).catch((err) => {
                console.log(err);
            })
        },
        //查询所有文章
        findAllArticle() {
            //判断是不是搜索查询
            if (sessionStorage.getItem("searchValue") != null && sessionStorage.getItem("searchValue") != "") {
                searchAllArticle(sessionStorage.getItem("searchValue")).then((res) => {
                    if (res.data.success) {
                        this.tableData = res.data.data.userList;
                    } else {
                        this.message(res);
                    }
                }).catch((err) => {
                    console.log(err);
                })
                sessionStorage.removeItem("searchValue");
            } else {

                //普通查询
                findAllArticle().then((res) => {
                    if (res.data.success) {
                        this.tableData = res.data.data.userList;
                    } else {
                        this.message(res);
                    }
                }).catch((err) => {
                    console.log(err);
                })

            }

        },

        //点击查看文章详情  
        oneArticle(articleData) {
            sessionStorage.setItem("blogId", JSON.stringify(articleData.id));
            this.$router.push({
                name: 'oneArticle'
            });
        },
        addArticle() {
            this.$router.push({
                name: 'addArticle'
            });
        },
        deleteBlogBtn(id) {
            this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                $deleteArticle(id).then((res) => {
                    this.$message({
                        type: res.data.success ? 'success' : 'error',
                        message: res.data.message,
                    });
                    if (res.data.success) {
                        this.findAllArticle();
                    }
                })

            }).catch(() => { });
        }

    }
};

</script>

<style scoped>
.adminBtn {
    position: absolute;
    top: 120px;
    right: 50px;
}

.deleteBlogBtn {
    float: right
}

.articleMessData {
    height: 0px;
}

.summary {
    height: 50px;
    font-size: 10px;
    /*弹性伸缩盒子*/
    display: -webkit-box;
    /*垂直排列*/
    -webkit-box-orient: vertical;
    /*只显示3行*/
    line-clamp: 3;
    -webkit-line-clamp: 3;
    /*溢出隐藏*/
    overflow: hidden;
    /*省略号代替*/
    text-overflow: ellipsis;
    position: relative;
    top: -15px;
    user-select: none;
}

.titleList {
    color: black;
    height: 20px;
    position: relative;
    top: -10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: none;
}


.articleMessData p {
    float: left;
    margin-right: 25px;
    font-size: 10px;
    position: relative;
    top: -30px;
    user-select: none;
}

.articleMessData p:nth-child(1) {
    float: left;
    margin-right: 5px;
    font-size: 10px;
    position: relative;
    top: -30px;
}


.contianer {
    height: auto;
    min-width: 1200px;
    padding-top: 50px;
}

.leftMain {
    margin: 25px;
}

.rigthMain {
    background-color: #cccccc;
}

.oneArtcle {
    min-width: 900px;
    width: 900px;
    margin: 0 auto;
    height: 120px;
    margin-bottom: 10px;
    border-bottom: solid 1px #cccccc;
    border-right: solid 1px #cccccc;
    border-top: solid 1px #e3e2e2;
    border-left: solid 1px #e3e2e2;
    padding: 5px;
}


.articleImg {
    background-color: white;
    float: left;
    width: 110px;
    height: 110px;
    margin: 5px;

}

.articleMess {
    float: left;

    width: 75%;
    height: 110px;
    margin: 5px;
}
</style>